<template>
  <div class="form-wrapper cp-container">
    <div class="material-textfield green cp-width" :class="{'validate-err': errors.has('原手机号')}">
      <input type="text" required v-model="oldPhone" v-validate="'required|phone'" name="原手机号" />
      <label data-content="原手机号*"></label>
    </div>
    <div class="material-textfield green cp-width" :class="{'validate-err': errors.has('新手机号')}">
       <input type="text" required v-model="newPhone" @blur="valiUser()" v-validate="'required|phone'" autocomplete="new-password" name="新手机号"/>
       <label data-content="新手机号*"></label>
    </div>
    <div class="material-textfield green cp-width" :class="{'validate-err': errors.has('密码')}">
       <input type="password" required v-model="password" v-validate="'required|password'" name="密码" autocomplete="new-password"/>
       <label data-content="密码*"></label>
    </div>
    <div class="material-textfield green cp-width" style="position: relative;" :class="{'validate-err': errors.has('验证码')}">
       <input type="text" required v-model="smsCode" v-validate="'required|zipCode'" name="验证码"/>
       <el-button type="success" :disabled="(times !== 0 && times !== 60) || isHas"  round style="position: absolute;right: 0;top: -15px;" @click="svc">
         <span v-show="times !== 60 && !isHas">{{times}}s</span>
         <span v-show="times === 60 && !isHas">发送验证码</span>
         <span v-show="isHas">新手机号已注册</span>
       </el-button>
       <label data-content="验证码*"></label>
    </div>
    <div class="">
      <el-button type="success width-min-200" round @click="confirm()">
        <span>提交修改</span>
      </el-button>
    </div>
  </div>

</template>

<script>
import axios from 'axios'


  export default {
    title: '修改电话',
    name: 'change-phone',
    data () {
      return {
        oldPhone: '',
        newPhone: '',
        password: '',
        smsCode: '',
        times: 60, // 验证吗计数其
        isHas: false
      }
    },
    methods: {
      confirm () {
        this.$validator.validate().then(result => {
          if (result) {
            let obj = {
              userId: this.$store.state.user.user.user.userId,
              oldPhone: this.oldPhone,
              newPhone: this.newPhone,
              password: this.password,
              code: this.smsCode
            }
            axios.post('/mscs/user/unbindPhone', this.$paramsConvert(obj)).then((res) => {
              if (res.data.code === 1) {
                this.$message({
                  message: '更换手机成功',
                  type: 'success'
                })
                this.$store.commit('ChangePhone', this.newPhone)
                this.oldPhone = ''
                this.newPhone = ''
                this.password = ''
                this.smsCode = ''
                this.$validator.reset()
              } else {
                this.$codeError(res)
              }
            }).catch((error) => {
              this.$catchError(error)
            })
          } else {
            this.$message({
              showClose: true,
              message: this.$connErmsg(this.$validator.errors.items),
              type: 'error'
            })
          }
        })
      },
      svc () {
        if (this.$validator.errors.has('新手机号') || this.newPhone.length === 0) {
          this.$message({
            showClose: true,
            message: '请填写正确的新手机号',
            type: 'error'
          })
        } else {
          // 发送验证吗
          axios.post('/mscs/user/sendSMSVerifyCode', this.$paramsConvert({type: 'UNBIND', userName: this.newPhone})).then(res => {
            if (res.data.code === 1) {
              this.countdown()
            } else {
              this.$codeError(res)
            }
          }).catch(error => {
            this.$catchError(error)
          })

        }
      },
      valiUser (str) {
        if (!this.$validator.errors.has('新手机号')) {
          if (this.newPhone.length === 11) {
            axios.get(`/mscs/user/findUserByUsername?phone=${this.newPhone}`).then((res) => {
              if (res.data.code === 1) {
                this.isHas = true
              } else {
                this.isHas = false
              }
            })
          }
        }
      },
      countdown () {
        let int = setInterval(() => {
          this.times--
          if (this.times === 0) {
            window.clearInterval(int)
            this.times = 60
          }
        }, 1000)
      },
    }
  }
</script>
<style >
  .cp-container {
    padding-top: 60px;
  }
  .cp-container .el-upload-dragger {
    width: 420px;
  }
  .bus-lin {
    width: 420px;
  }
  .bus-lin > label {
    color: #666666;
  }
  .bus-lin .upload-demo {
    margin: 10px 0 45px 0;
  }
  .cp-width {
    width: 420px;
  }
  .cp-container .el-dialog__body {
    overflow: auto;
  }
</style>
